<script setup>
import { ref, computed, onMounted } from 'vue'
import { useTaskStore } from '../../stores/taskStore'
import { useCategoryStore } from '../../stores/categoryStore'
import TaskList from '../../components/todo/TaskList.vue'
import AddTask from '../../components/todo/AddTask.vue'

const taskStore = useTaskStore()
const categoryStore = useCategoryStore()

// 获取今日任务
const todayTasks = computed(() => taskStore.todayTasks)

// 获取当前日期
const today = new Date()
const formattedDate = computed(() => {
  const year = today.getFullYear()
  const month = today.getMonth() + 1
  const day = today.getDate()
  
  const weekDay = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][today.getDay()]
  
  return `${year}年${month}月${day}日 ${weekDay}`
})

// 初始化数据
onMounted(async () => {
  await categoryStore.loadCategories()
  await taskStore.loadTasks()
})
</script>

<template>
  <div class="today-view">
    <!-- 标题和日期 -->
    <div class="page-header mb-6">
      <h1 class="text-h4 mb-1">今日任务</h1>
      <div class="text-subtitle-1 text-medium-emphasis">{{ formattedDate }}</div>
    </div>
    
    <!-- 添加任务 -->
    <AddTask />
    
    <!-- 任务列表 -->
    <TaskList 
      :tasks="todayTasks" 
      title="今日待办" 
      emptyMessage="今天暂无任务，点击上方添加新任务"
    />
  </div>
</template>

<style scoped>
.today-view {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}
</style> 